/**
 * Created by 30947 on 2018/7/18.
 */
// script.js  



$(function () {
  char1()
  // char2()
  char3()
  char4()
  char5()
  char6()

})
// 统计分析图
function char1() {
  // var myChart = echarts.init($('#char1')[0])
  var char1 = function (res) {
    var myChart = echarts.init(document.getElementById("char1"));
    var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        textStyle: {
          color: 'white' // 设置字体颜色为白色
        },
        top: '5%',
        left: 'center'
      },
      series: [
        {
          color: [
            '#73FF73',
            '#FFFF82',
            '#FFB973',
            '#FF7373',
            '#AF7373'
          ],
          name: '污染程度:',
          type: 'pie',
          radius: ['30%', '63%'],
          center: ['50%', '60%'],
          startAngle: 180,
          endAngle: 360,

          data: [
            { value: res[0].proportion, name: res[0].type },
            { value: res[1].proportion, name: res[1].type },
            { value: res[2].proportion, name: res[2].type },
            { value: res[3].proportion, name: res[3].type },
            { value: res[4].proportion, name: res[4].type }

          ]
        }
      ]
    };
    myChart.setOption(option);
  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_aqi_proportion;'
    },
    success: char1
  });
}

function showTable(type) {
  var best = $('#best');
  var worst = $('#worst');
  var tbody;
  var sqlQuery;

  if (type === 'best') {
    best.show();
    worst.hide();
    tbody = $('#best-tbody');
    sqlQuery = 'select * from ads_aqi_rank';
  } else if (type === 'worst') {
    best.hide();
    worst.show();
    tbody = $('#worst-tbody');
    sqlQuery = 'select * from ads_aqi_worst';
  }

  $.ajax({
    url: '/eval',
    method: 'POST',
    data: { sql: sqlQuery },
    success: function (res) {
      tbody.empty(); // 清空tbody中的现有内容  

      $.each(res, function (index, row) { // 遍历返回的数据  
        var tr = $('<tr></tr>'); // 创建一个新的<tr>元素  

        $.each(row, function (key, value) { // 遍历对象的每个属性  
          var td = $('<td></td>').text(value); // 创建一个新的<td>元素并设置文本内容  
          tr.append(td); // 将<td>添加到<tr>中  
        });

        tbody.append(tr); // 将整行<tr>添加到<tbody>中  
      });
    },
    error: function (xhr, status, error) {
      console.error("AJAX 请求失败: " + error);
    }
  });
}

// 页面加载时默认显示“最好”的表格  
$(document).ready(function () {
  showTable('best');
});


function char3() {
  let myChartdata
  var myChart = echarts.init($('#char3')[0])
  $(function () {
    $.ajax({   //2、发送给后端
      url: "http://localhost:8080/getFireInfoDefulte",
      type: 'GET',  //设置发送的方式 这里假设为POST
      dataType: "json",
      data: { CityName: "北京" },  //把选中的标题发给后端
      success: function (data) {
        console.log(data[0]["a1"])
        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: '5%',
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['2020', '2021', '2022', '2023'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              name: '春节前',
              type: 'bar',
              data: [data[0]["a1"], data[0]["b1"], data[0]["c1"], data[0]["d1"]]
            },
            {
              name: '春节中',
              type: 'bar',
              data: [data[0]["a2"], data[0]["b2"], data[0]["c2"], data[0]["d2"]]
            },
            {
              name: '春节后',
              type: 'bar',
              data: [data[0]["a3"], data[0]["b3"], data[0]["c3"], data[0]["d3"]]
            }
          ]
        };

        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        myChartdata = data
        // 4、这里写成功后更新页面的操作
      }
    })
  })
  $(".city").change(function () {
    var title = $(this).text();  // 1、获取选择下拉框的标题
    console.log(title)
    var id = $(this).val();
    console.log(id)
    var url = "http://localhost:8080/getFireInfo";  //这里填写后端的url 
    $.ajax({   //2、发送给后端
      url: url,
      type: 'GET',  //设置发送的方式 这里假设为POST
      dataType: "json",
      data: { CityName: id },  //把选中的标题发给后端
      success: function (data) {
        console.log(data)
        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: '5%',
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['2020', '2021', '2022', '2023'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              name: '春节前',
              type: 'bar',
              data: [data[0]["a1"], data[0]["b1"], data[0]["c1"], data[0]["d1"]]
            },
            {
              name: '春节中',
              type: 'bar',
              data: [data[0]["a2"], data[0]["b2"], data[0]["c2"], data[0]["d2"]]
            },
            {
              name: '春节后',
              type: 'bar',
              data: [data[0]["a3"], data[0]["b3"], data[0]["c3"], data[0]["d3"]]
            }
          ]
        };

        myChart.setOption(option)
        // 4、这里写成功后更新页面的操作
      }
    })
  });
  myChart.on('click', function (param) {
    setTimeout(function () {
      location.href = ''
    }, 20000)
  })

}
function char4() {
  var char4 = function (res) {
    var mychart = echarts.init(document.getElementById("char4"));
    var option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF','#007ACC'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#ffffff'
          }
        }
      },
      legend: {
        data: ['2023', '2022', '2021', '2020'],
          textStyle: {
            color: '#fff'
          }
        
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
            '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45'
          ]
        }
      ],
      yAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '2023',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          symbolColor:'',
          data: [
            { value: res[15].avg_北京 },
            { value: res[16].avg_北京 },
            { value: res[17].avg_北京 },
            { value: res[18].avg_北京 },
            { value: res[19].avg_北京 },
            { value: res[20].avg_北京 },
            { value: res[21].avg_北京 },
            { value: res[22].avg_北京 },
            { value: res[23].avg_北京 },
            { value: res[24].avg_北京 },
            { value: res[25].avg_北京 },
            { value: res[26].avg_北京 },
            { value: res[27].avg_北京 },
            { value: res[28].avg_北京 },
            { value: res[29].avg_北京 },
            { value: res[0].avg_北京 },
            { value: res[1].avg_北京 },
            { value: res[2].avg_北京 },
            { value: res[3].avg_北京 },
            { value: res[4].avg_北京 },
            { value: res[5].avg_北京 },
            { value: res[6].avg_北京 },
            { value: res[7].avg_北京 },
            { value: res[8].avg_北京 },
            { value: res[9].avg_北京 },
            { value: res[10].avg_北京 },
            { value: res[11].avg_北京 },
            { value: res[12].avg_北京 },
            { value: res[13].avg_北京 },
            { value: res[14].avg_北京 },
            { value: res[30].avg_北京 },
            { value: res[31].avg_北京 },
            { value: res[32].avg_北京 },
            { value: res[33].avg_北京 },
            { value: res[34].avg_北京 },
            { value: res[35].avg_北京 },
            { value: res[36].avg_北京 },
            { value: res[37].avg_北京 },
            { value: res[38].avg_北京 },
            { value: res[39].avg_北京 },
            { value: res[40].avg_北京 },
            { value: res[41].avg_北京 },
            { value: res[42].avg_北京 },
            { value: res[43].avg_北京 },
            { value: res[44].avg_北京 }
          ]
        },
        {
          name: '2022',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          symbolColor:'#FFF002',
          data: [
            { value: res[60].avg_北京 },
            { value: res[61].avg_北京 },
            { value: res[62].avg_北京 },
            { value: res[63].avg_北京 },
            { value: res[64].avg_北京 },
            { value: res[65].avg_北京 },
            { value: res[66].avg_北京 },
            { value: res[67].avg_北京 },
            { value: res[68].avg_北京 },
            { value: res[69].avg_北京 },
            { value: res[70].avg_北京 },
            { value: res[71].avg_北京 },
            { value: res[72].avg_北京 },
            { value: res[73].avg_北京 },
            { value: res[74].avg_北京 },
            { value: res[45].avg_北京 },
            { value: res[46].avg_北京 },
            { value: res[47].avg_北京 },
            { value: res[48].avg_北京 },
            { value: res[49].avg_北京 },
            { value: res[50].avg_北京 },
            { value: res[51].avg_北京 },
            { value: res[52].avg_北京 },
            { value: res[53].avg_北京 },
            { value: res[54].avg_北京 },
            { value: res[55].avg_北京 },
            { value: res[56].avg_北京 },
            { value: res[57].avg_北京 },
            { value: res[58].avg_北京 },
            { value: res[59].avg_北京 },
            { value: res[75].avg_北京 },
            { value: res[76].avg_北京 },
            { value: res[77].avg_北京 },
            { value: res[78].avg_北京 },
            { value: res[79].avg_北京 },
            { value: res[80].avg_北京 },
            { value: res[81].avg_北京 },
            { value: res[82].avg_北京 },
            { value: res[83].avg_北京 },
            { value: res[84].avg_北京 },
            { value: res[85].avg_北京 },
            { value: res[86].avg_北京 },
            { value: res[87].avg_北京 },
            { value: res[88].avg_北京 },
            { value: res[89].avg_北京 },
          ]
        },
        {
          name: '2021',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          symbolColor: '#FFF002',
          data: [
            { value: res[60].avg_北京 },
            { value: res[105].avg_北京 },
            { value: res[106].avg_北京 },
            { value: res[107].avg_北京 },
            { value: res[108].avg_北京 },
            { value: res[109].avg_北京 },
            { value: res[110].avg_北京 },
            { value: res[111].avg_北京 },
            { value: res[112].avg_北京 },
            { value: res[113].avg_北京 },
            { value: res[114].avg_北京 },
            { value: res[115].avg_北京 },
            { value: res[116].avg_北京 },
            { value: res[117].avg_北京 },
            { value: res[118].avg_北京 },
            { value: res[119].avg_北京 },
            { value: res[91].avg_北京 },
            { value: res[92].avg_北京 },
            { value: res[93].avg_北京 },
            { value: res[94].avg_北京 },
            { value: res[95].avg_北京 },
            { value: res[96].avg_北京 },
            { value: res[97].avg_北京 },
            { value: res[98].avg_北京 },
            { value: res[99].avg_北京 },
            { value: res[100].avg_北京 },
            { value: res[101].avg_北京 },
            { value: res[102].avg_北京 },
            { value: res[103].avg_北京 },
            { value: res[104].avg_北京 },
            { value: res[120].avg_北京 },
            { value: res[121].avg_北京 },
            { value: res[122].avg_北京 },
            { value: res[123].avg_北京 },
            { value: res[124].avg_北京 },
            { value: res[125].avg_北京 },
            { value: res[126].avg_北京 },
            { value: res[127].avg_北京 },
            { value: res[128].avg_北京 },
            { value: res[129].avg_北京 },
            { value: res[130].avg_北京 },
            { value: res[131].avg_北京 },
            { value: res[132].avg_北京 },
            { value: res[133].avg_北京 },
            { value: res[134].avg_北京 }
          ]
        },
        {
          name: '2020',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          symbolColor: '#EB0082',
          data: [

            { value: res[150].avg_北京 },
            { value: res[151].avg_北京 },
            { value: res[152].avg_北京 },
            { value: res[153].avg_北京 },
            { value: res[154].avg_北京 },
            { value: res[155].avg_北京 },
            { value: res[156].avg_北京 },
            { value: res[157].avg_北京 },
            { value: res[158].avg_北京 },
            { value: res[159].avg_北京 },
            { value: res[160].avg_北京 },
            { value: res[161].avg_北京 },
            { value: res[162].avg_北京 },
            { value: res[163].avg_北京 },
            { value: res[164].avg_北京 },
            { value: res[135].avg_北京 },
            { value: res[136].avg_北京 },
            { value: res[137].avg_北京 },
            { value: res[138].avg_北京 },
            { value: res[139].avg_北京 },
            { value: res[140].avg_北京 },
            { value: res[141].avg_北京 },
            { value: res[142].avg_北京 },
            { value: res[143].avg_北京 },
            { value: res[144].avg_北京 },
            { value: res[145].avg_北京 },
            { value: res[146].avg_北京 },
            { value: res[147].avg_北京 },
            { value: res[148].avg_北京 },
            { value: res[149].avg_北京 },
            { value: res[165].avg_北京 },
            { value: res[167].avg_北京 },
            { value: res[168].avg_北京 },
            { value: res[169].avg_北京 },
            { value: res[170].avg_北京 },
            { value: res[171].avg_北京 },
            { value: res[172].avg_北京 },
            { value: res[173].avg_北京 },
            { value: res[174].avg_北京 },
            { value: res[175].avg_北京 },
            { value: res[176].avg_北京 },
            { value: res[177].avg_北京 },
            { value: res[178].avg_北京 },
            { value: res[179].avg_北京 }
          ]
        },
      ]
    };
    mychart.setOption(option);
    // mychart.resize({width: 450, height: 300});
  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_so2_yan;'
    },
    success: char4
  })
}
function char5() {
  var char5 = function (res) {
    var mychart = echarts.init(document.getElementById("char5"));
    var option = {
      color: ['#80FFA5','#00DDFF', '#37A2FF','#007ACC'],
  
    tooltip: {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        label: {
            backgroundColor: '#ffffff'
        }
        }
    },
    legend: {
        textStyle: {
          color: 'white' // 设置字体颜色为白色
        } ,
        data: ['2023', '2022', '2021', '2020']
    },
    toolbox: {
        feature: {
        saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
          axisLabel: {
            textStyle: {
              color: 'white' // 设置字体颜色为白色
            }
          },
        type: 'category',
        boundaryGap: false,
        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14','15',
             '16', '17', '18', '19', '20', '21', '22','23', '24', '25', '26', '27', '28', '29','30',
             '31', '32', '33', '34', '35', '36', '37','38', '39', '40', '41', '42', '43', '44','45'
    ]
        }
    ],
    yAxis: [
        {
          axisLabel: {
            textStyle: {
              color: 'white' // 设置字体颜色为白色
            }
          },
        type: 'value'
        }
    ],
    series: [
        {
        name: '2023',
        type: 'bar',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data: [
                        {value: res[15].avg_北京},
                        {value: res[16].avg_北京},
                        {value: res[17].avg_北京},
                        {value: res[18].avg_北京},
                        {value: res[19].avg_北京},
                        {value: res[20].avg_北京},
                        {value: res[21].avg_北京},
                        {value: res[22].avg_北京},
                        {value: res[23].avg_北京},
                        {value: res[24].avg_北京},
                        {value: res[25].avg_北京},
                        {value: res[26].avg_北京},
                        {value: res[27].avg_北京},
                        {value: res[28].avg_北京},
                        {value: res[29].avg_北京},
                        {value: res[30].avg_北京},
                        {value: res[31].avg_北京},
                        {value: res[32].avg_北京},
                        {value: res[33].avg_北京},
                        {value: res[34].avg_北京},
                        {value: res[35].avg_北京},
                        {value: res[36].avg_北京},
                        {value: res[37].avg_北京},
                        {value: res[38].avg_北京},
                        {value: res[39].avg_北京},
                        {value: res[40].avg_北京},
                        {value: res[41].avg_北京},
                        {value: res[42].avg_北京},
                        {value: res[43].avg_北京},
                        {value: res[44].avg_北京},
                        {value: res[0].avg_北京},
                        {value: res[1].avg_北京},
                        {value: res[2].avg_北京},
                        {value: res[3].avg_北京},
                        {value: res[4].avg_北京},
                        {value: res[5].avg_北京},
                        {value: res[6].avg_北京},
                        {value: res[7].avg_北京},
                        {value: res[8].avg_北京},
                        {value: res[9].avg_北京},
                        {value: res[10].avg_北京},
                        {value: res[11].avg_北京},
                        {value: res[12].avg_北京},
                        {value: res[13].avg_北京},
                        {value: res[14].avg_北京}
                       
        ]
        },
        {
        name: '2022',
        type: 'bar',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data: [
                        {value: res[60].avg_北京},
                        {value: res[61].avg_北京},
                        {value: res[62].avg_北京},
                        {value: res[63].avg_北京},
                        {value: res[64].avg_北京},
                        {value: res[65].avg_北京},
                        {value: res[66].avg_北京},
                        {value: res[67].avg_北京},
                        {value: res[68].avg_北京},
                        {value: res[69].avg_北京},
                        {value: res[70].avg_北京},
                        {value: res[71].avg_北京},
                        {value: res[72].avg_北京},
                        {value: res[73].avg_北京},
                        {value: res[74].avg_北京},
                        {value: res[75].avg_北京},
                        {value: res[76].avg_北京},
                        {value: res[77].avg_北京},
                        {value: res[78].avg_北京},
                        {value: res[79].avg_北京},
                        {value: res[80].avg_北京},
                        {value: res[81].avg_北京},
                        {value: res[82].avg_北京},
                        {value: res[83].avg_北京},
                        {value: res[84].avg_北京},
                        {value: res[85].avg_北京},
                        {value: res[86].avg_北京},
                        {value: res[87].avg_北京},
                        {value: res[88].avg_北京},
                        {value: res[89].avg_北京},
                        {value: res[45].avg_北京},
                        {value: res[46].avg_北京},
                        {value: res[47].avg_北京},
                        {value: res[48].avg_北京},
                        {value: res[49].avg_北京},
                        {value: res[50].avg_北京},
                        {value: res[51].avg_北京},
                        {value: res[52].avg_北京},
                        {value: res[53].avg_北京},
                        {value: res[54].avg_北京},
                        {value: res[55].avg_北京},
                        {value: res[56].avg_北京},
                        {value: res[57].avg_北京},
                        {value: res[58].avg_北京},
                        {value: res[59].avg_北京}
                       
        ]
        },
        {
        name: '2021',
        type: 'bar',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data: [
        {value: res[60].avg_北京},
                        {value: res[105].avg_北京},
                        {value: res[106].avg_北京},
                        {value: res[107].avg_北京},
                        {value: res[108].avg_北京},
                        {value: res[109].avg_北京},
                        {value: res[110].avg_北京},
                        {value: res[111].avg_北京},
                        {value: res[112].avg_北京},
                        {value: res[113].avg_北京},
                        {value: res[114].avg_北京},
                        {value: res[115].avg_北京},
                        {value: res[116].avg_北京},
                        {value: res[117].avg_北京},
                        {value: res[118].avg_北京},
                        {value: res[119].avg_北京},
                        {value: res[120].avg_北京},
                        {value: res[121].avg_北京},
                        {value: res[122].avg_北京},
                        {value: res[123].avg_北京},
                        {value: res[124].avg_北京},
                        {value: res[125].avg_北京},
                        {value: res[126].avg_北京},
                        {value: res[127].avg_北京},
                        {value: res[128].avg_北京},
                        {value: res[129].avg_北京},
                        {value: res[130].avg_北京},
                        {value: res[131].avg_北京},
                        {value: res[132].avg_北京},
                        {value: res[133].avg_北京},
                        {value: res[134].avg_北京},
                        {value: res[91].avg_北京},
                        {value: res[92].avg_北京},
                        {value: res[93].avg_北京},
                        {value: res[94].avg_北京},
                        {value: res[95].avg_北京},
                        {value: res[96].avg_北京},
                        {value: res[97].avg_北京},
                        {value: res[98].avg_北京},
                        {value: res[99].avg_北京},
                        {value: res[100].avg_北京},
                        {value: res[101].avg_北京},
                        {value: res[102].avg_北京},
                        {value: res[103].avg_北京},
                        {value: res[104].avg_北京},
                       
        ]
        },
        {
        name: '2020',
        type: 'bar',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data: [
    
                        {value: res[150].avg_北京},
                        {value: res[151].avg_北京},
                        {value: res[152].avg_北京},
                        {value: res[153].avg_北京},
                        {value: res[154].avg_北京},
                        {value: res[155].avg_北京},
                        {value: res[156].avg_北京},
                        {value: res[157].avg_北京},
                        {value: res[158].avg_北京},
                        {value: res[159].avg_北京},
                        {value: res[160].avg_北京},
                        {value: res[161].avg_北京},
                        {value: res[162].avg_北京},
                        {value: res[163].avg_北京},
                        {value: res[164].avg_北京},
                        {value: res[165].avg_北京},
                        {value: res[167].avg_北京},
                        {value: res[168].avg_北京},
                        {value: res[169].avg_北京},
                        {value: res[170].avg_北京},
                        {value: res[171].avg_北京},
                        {value: res[172].avg_北京},
                        {value: res[173].avg_北京},
                        {value: res[174].avg_北京},
                        {value: res[175].avg_北京},
                        {value: res[176].avg_北京},
                        {value: res[177].avg_北京},
                        {value: res[178].avg_北京},
                        {value: res[179].avg_北京},
                        {value: res[135].avg_北京},
                        {value: res[136].avg_北京},
                        {value: res[137].avg_北京},
                        {value: res[138].avg_北京},
                        {value: res[139].avg_北京},
                        {value: res[140].avg_北京},
                        {value: res[141].avg_北京},
                        {value: res[142].avg_北京},
                        {value: res[143].avg_北京},
                        {value: res[144].avg_北京},
                        {value: res[145].avg_北京},
                        {value: res[146].avg_北京},
                        {value: res[147].avg_北京},
                        {value: res[148].avg_北京},
                        {value: res[149].avg_北京},
                       
        ]
        },
    ]
    };
    mychart.setOption(option);
}
$.ajax({
    url:'/eval',
    method:'POST',
    data:{
        sql:'select * from ads_pm25_yan;'
    },
    success: char5
})
}
function char6() {
  var myChart = echarts.init($('#char6')[0])
  var char6 = function (res) {
    // var myChart = echarts.init(document.getElementById("char6"));
    var option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {

        textStyle: {
          color: 'white' // 设置字体颜色为白色
        },
        data: ['优', '良', '轻度污染', '中度污染', '重度污染']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        axisLabel: {
          textStyle: {
            color: 'white' // 设置字体颜色为白色
          }
        },
        type: 'category',
        boundaryGap: false,
        data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023']
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: 'white' // 设置字体颜色为白色
          }
        },
        type: 'value'
      },
      series: [
        {
          name: '优',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [{ value: res[0].优, name: res[0].优 },
          { value: res[1].优, name: res[1].优 },
          { value: res[2].优, name: res[2].优 },
          { value: res[3].优, name: res[3].优 },
          { value: res[4].优, name: res[4].优 },
          { value: res[5].优, name: res[5].优 },
          { value: res[6].优, name: res[6].优 },
          { value: res[7].优, name: res[7].优 },
          { value: res[8].优, name: res[8].优 },
          { value: res[9].优, name: res[9].优 }
          ],
        },
        {
          name: '良',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [{ value: res[0].良, name: res[0].良 },
          { value: res[1].良, name: res[1].良 },
          { value: res[2].良, name: res[2].良 },
          { value: res[3].良, name: res[3].良 },
          { value: res[4].良, name: res[4].良 },
          { value: res[5].良, name: res[5].良 },
          { value: res[6].良, name: res[6].良 },
          { value: res[7].良, name: res[7].良 },
          { value: res[8].良, name: res[8].良 },
          { value: res[9].良, name: res[9].良 }
          ]
        },
        {
          name: '轻度污染',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [{ value: res[0].轻度污染, name: res[0].轻度污染 },
          { value: res[1].轻度污染, name: res[1].轻度污染 },
          { value: res[2].轻度污染, name: res[2].轻度污染 },
          { value: res[3].轻度污染, name: res[3].轻度污染 },
          { value: res[4].轻度污染, name: res[4].轻度污染 },
          { value: res[5].轻度污染, name: res[5].轻度污染 },
          { value: res[6].轻度污染, name: res[6].轻度污染 },
          { value: res[7].轻度污染, name: res[7].轻度污染 },
          { value: res[8].轻度污染, name: res[8].轻度污染 },
          { value: res[9].轻度污染, name: res[9].轻度污染 }
          ]
        },
        {
          name: '中度污染',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 0, 135)'
              },
              {
                offset: 1,
                color: 'rgb(135, 0, 157)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [{ value: res[0].中度污染, name: res[0].中度污染 },
          { value: res[1].中度污染, name: res[1].中度污染 },
          { value: res[2].中度污染, name: res[2].中度污染 },
          { value: res[3].中度污染, name: res[3].中度污染 },
          { value: res[4].中度污染, name: res[4].中度污染 },
          { value: res[5].中度污染, name: res[5].中度污染 },
          { value: res[6].中度污染, name: res[6].中度污染 },
          { value: res[7].中度污染, name: res[7].中度污染 },
          { value: res[8].中度污染, name: res[8].中度污染 },
          { value: res[9].中度污染, name: res[9].中度污染 }
          ]
        },
        {
          name: '重度污染',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 191, 0)'
              },
              {
                offset: 1,
                color: 'rgb(224, 62, 76)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [{ value: res[0].重度污染, name: res[0].重度污染 },
          { value: res[1].重度污染, name: res[1].重度污染 },
          { value: res[2].重度污染, name: res[2].重度污染 },
          { value: res[3].重度污染, name: res[3].重度污染 },
          { value: res[4].重度污染, name: res[4].重度污染 },
          { value: res[5].重度污染, name: res[5].重度污染 },
          { value: res[6].重度污染, name: res[6].重度污染 },
          { value: res[7].重度污染, name: res[7].重度污染 },
          { value: res[8].重度污染, name: res[8].重度污染 },
          { value: res[9].重度污染, name: res[9].重度污染 }
          ]
        }
      ]
    };

    myChart.setOption(option);
  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_aqi_level;'
    },
    success: char6
  });
}
